<template>
  <div class="button-operation">
    <div>
      <el-button
        v-if="edit && edit.show"
        :icon="edit.icon"
        :type="edit.type"
        @click="onButton(edit)"
        >{{ edit.name }}</el-button
      >
      <el-button v-if="del && del.show" :icon="del.icon" :type="del.type" @click="onButton(del)">{{
        del.name
      }}</el-button>

      <el-button
        v-if="upload && upload.show"
        :icon="upload.icon"
        :type="upload.type"
        @click="onButton(upload)"
        >{{ upload.name }}</el-button
      >

      <el-button
        v-if="download && download.show"
        :icon="download.icon"
        :type="download.type"
        @click="onButton(del)"
        >{{ download.name }}</el-button
      >
      <template v-for="(item, index) in columnList" :key="index">
        <el-button v-if="item.show" :icon="item.icon" :type="item.type" @click="onButton(item)">{{
          item.name
        }}</el-button>
      </template>
    </div>
    <div>
      <el-button v-if="refresh" icon="Refresh" circle @click="onOperationRefresh" />
      <el-button v-if="search" type="primary" icon="Search" circle @click="onOperationSearch" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, type PropType } from 'vue'

interface operationColumn {
  type: string
  name: string
  size: string
  value: string
  icon: string
  show: boolean
}
const emits = defineEmits(['onOperationRefresh', 'onOperationSearch', 'onOperationButton'])
const Props = defineProps({
  edit: {
    type: Object as PropType<operationColumn>,
    default() {
      return {
        type: 'primary',
        name: '增加',
        size: 'small',
        value: 'edit',
        icon: 'Edit',
        show: true
      }
    }
  },
  del: {
    type: Object as PropType<operationColumn>,
    default() {
      return {
        type: 'danger',
        name: '删除',
        size: 'small',
        value: 'del',
        icon: 'Delete',
        show: true
      }
    }
  },
  upload: {
    type: Object as PropType<operationColumn>,
    default() {
      return {
        type: 'success',
        name: '导入',
        size: 'small',
        value: 'upload',
        icon: 'Upload',
        show: true
      }
    }
  },
  download: {
    type: Object as PropType<operationColumn>,
    default() {
      return {
        type: 'warning',
        name: '导出',
        size: 'small',
        value: 'download',
        icon: 'Download',
        show: true
      }
    }
  },
  refresh: {
    type: Boolean,
    default: true
  },
  search: {
    type: Boolean,
    default: true
  },
  columnList: {
    type: Array as PropType<operationColumn[]>,
    default() {
      return []
    }
  }
})

const { refresh, search, columnList, edit, del, upload, download } = toRefs(Props)

//点击刷新
const onOperationRefresh = () => {
  emits('onOperationRefresh')
}
//点击查询
const onOperationSearch = () => {
  emits('onOperationSearch')
}
const onButton = (items: object) => {
  emits('onOperationButton', items)
}
</script>

<style lang="scss" scope>
.button-operation {
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
}
</style>
